<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      :isHaveExport="false"
      @sendUserSearch="getSearch"
      :searchData="userSearchData"
      :isHaveAdd="false"
    >
      <template v-slot:table>
        <div
          id="content-right-box"
          class="content-right-box"
          style="background: none"
        >
          <div class="content-right">
            <div
              class="alert alert-info"
              style="line-height: 25px; height: 40px; width: 100%;margin-top: 0px;"
            >
              当前可用短信数量：
              <span class="colorRed ftsize18">{{ sms_num }}</span> 条
            </div>
            <h1 class="content-right-title">
              短信记录
              <a
                class="gicon-info-sign gicon_linkother"
                href="/Help/lists/id/216.html"
                target="_blank"
              ></a>
            </h1>
            <el-row>
              <el-table
                v-loading="loading"
                ref="multipleTable"
                stripe
                header-row-class-name="head_color"
                :data="list.data"
                tooltip-effect="dark"
                style="width: 99.8%"
              >
                <el-table-column label="手机号码" min-width="140">
                  <template slot-scope="scope"
                    >{{ "(+" + scope.row.quhao + ") "
                    }}{{ scope.row.tel }}</template
                  >
                </el-table-column>

                <el-table-column label="验证码" min-width="120">
                  <template
                    slot-scope="scope"
                    style="vertical-align: text-top"
                    >{{ scope.row.code }}</template
                  >
                </el-table-column>

                <!-- <el-table-column label="IP地址" min-width="120">
                  <template slot-scope="scope">{{scope.row.ip}}</template>
                </el-table-column> -->

                <el-table-column label="IP来源" min-width="100">
                  <template slot-scope="scope">{{
                    scope.row.ip_address
                  }}</template>
                </el-table-column>

                <el-table-column label="用户ID" min-width="120">
                  <template slot-scope="scope">{{ scope.row.uid }}</template>
                </el-table-column>

                <el-table-column label="发送时间" min-width="120">
                  <template slot-scope="scope">{{
                    scope.row.created_time | getTimeFormat
                  }}</template>
                </el-table-column>
              </el-table>
            </el-row>
          </div>
        </div>
      </template>
    </tableComponents>
  </div>
</template>

<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import smsSearch from "@/components/currency/smsSearch.vue";
import { smsjlSearchData } from "@/assets/js/searchData/searchData"; //引入搜索的数据
export default {
  components: {
    HeadTitle,
    smsSearch,
  },
  data() {
    return {
      userSearchData: smsjlSearchData,
      list: [],
      loading: false,
      currentPage1: 1,
      pageSize: 10,
      searchAll: {},
      address: "",
      sms_num: 0,
    };
  },
  methods: {
    get_smsnum() {
      this.$api.getConfig.get_smsnum({}).then((res) => {
        if (res.data.code == 200) {
          this.sms_num = res.data.result;
        }
      });
    },
    getSearch(obj) {
      this.searchAll = obj;
      this.getSmsRecord(obj);
    },
    getSmsRecord(data) {
      this.loading = true;
      data = data || {};
      var params = data;
      this.$api.getConfig.getSmsRecord(params).then((res) => {
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
        this.loading = false;
      });
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getSmsRecord(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getSmsRecord(params);
    },
  },
  mounted() {
    this.get_smsnum();
    this.getSmsRecord();
  },
};
</script>
